<template>
  <div class="evaluate-container">
    <!-- 订单信息头部 -->
    <header>
      <button class="back-arrow" @click="goBack"></button>
      <p>订单评价</p>
    </header>

    <!-- 订单详情部分 -->
    <div class="order-detail" v-if="orderDetail">
      <h3>{{ orderDetail.business.businessName }}</h3>
      <ul class="order-items">
        <li v-for="item in orderDetail.list" :key="item.food.foodName">
          {{ item.food.foodName }} x {{ item.quantity }}
          <p>&#165;{{ (item.foodPrice * item.quantity).toFixed(2) }}</p>
        </li>
        <li>
          <p>配送费</p>
          <p>&#165;{{ orderDetail.business.deliveryPrice }}</p>
        </li>
      </ul>
      <p class="order-total">总计：&#165;{{ orderDetail.orderTotal }}</p>
    </div>

    <!-- 评价输入部分 -->
    <div class="review-input-container">
      <textarea v-model="comment" placeholder="写下你的评价..." rows="4"></textarea>
      <button @click="submitComment">提交评价</button>
    </div>
     <!-- Alert Modal -->
     <alert-modal v-if="alertVisible" :visible.sync="alertVisible" :message="alertMessage"></alert-modal>
  </div>
</template>

<script>
import axios from 'axios';
import { required } from 'vue';
import request from '../request.js';
import AlertModal from '../views/AlertModal.vue';

export default {
  name: 'Evaluate',
  components: {
         AlertModal
        },
  data() {
    return {
      comment: '',
      orderDetail: null,
      orderId: this.$route.query.orderId,
      alertVisible: false,
		  alertMessage: '',
    };
  },
  created() {
    this.fetchOrderDetails();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    fetchOrderDetails() {
      request.get(`orders/${this.orderId}`).then(response => {
        this.orderDetail = response.data;
      }).catch(error => {
        console.error('获取订单详情失败:', error);
      });
    },
    async submitComment() {
      if (this.comment.trim() === '') {
       this.alertMessage ='评价内容不能为空！';
       this.alertVisible = true;
        return;
      }
      try {
        const response = await request.post(`/orders/comment/${this.orderId}`, this.$qs.stringify({
          comment: this.comment
        }));
        if (response.status === 200) {
          this.comment = '';
          this.alertMessage ='评价提交成功！';
          this.alertVisible = true;
          // 跳转到订单列表页面
          this.$router.push({ path: '/orderlist', query: { update: 'true' } });
        }
      } catch (error) {
        console.error('提交评价失败:', error);
        this.alertMessage ='评价提交失败！';
        this.alertVisible = true;
      }
    },
  }
};
</script>

<style scoped>
.evaluate-container {
  padding: 2rem; /* 使用 rem 单位，相对于根元素的字体大小 */
  box-sizing: border-box;
  position: relative;
  max-width: 1200px; /* 可以设置一个最大宽度，超过这个宽度后内容不再扩展 */
  margin: 0 auto; /* 水平居中 */
}

header {
  background-color: #0097FF;
  color: #fff;
  font-size: 1.2rem; /* 使用 rem 单位 */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 1rem 0; /* 增加一些内边距 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-arrow {
  position: absolute;
  left: 1rem; /* 使用 rem 单位 */
  top: 0.5rem; /* 根据实际需要调整 */
  background-color: rgba(0, 151, 255, 0.5);
  border: none;
  cursor: pointer;
  border-radius: 50%;
  padding: 0.5rem; /* 增加内边距 */
  transition: background-color 0.3s ease;
}

.back-arrow::before {
  content: '\f053';
  font-family: 'FontAwesome';
  font-size: 1.5rem; /* 使用 rem 单位 */
  color: #fff;
}

.back-arrow:hover::before {
  color: #0a2ddc;
}

.back-arrow:hover {
  background-color: rgba(0, 151, 255, 0.3);
}

.order-detail {
  margin-top: 5rem; /* 根据头部的高度调整 */
}

.order-items {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.order-items li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-total {
  font-size: 1rem; /* 使用 rem 单位 */
  color: #666;
  margin-top: 0.5rem;
}

.review-input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem; /* 根据内容调整 */
}

.review-input-container textarea {
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  resize: vertical;
  font-size: 1rem; /* 使用 rem 单位 */
}

.review-input-container button {
  padding: 0.5rem 1rem;
  background-color: #0097FF;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.review-input-container button:hover {
  background-color: #0077cc;
}

.review-input-container button:active {
  transform: translateY(2px);
}
</style>